<template lang="html">
    <div class="block">
        
        <div class="top_block">

        </div>
        <div class="table_block">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                class="tableDatadisplay">
                <el-table-column
                    label="发送人"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.sendFromName}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="消息主题"
                    align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.subtitle}}</div>
                    </template>
                </el-table-column>                                   
                <el-table-column
                    label="发送日期"
                    align="center">
                    <template slot-scope="scope">
                        <span>{{$moment(scope.row.createTime).format('YYYY-MM-DD hh:mm:ss')}}</span>
                    </template>
                </el-table-column>                
                <el-table-column
                    label="状态"
                    align="center">
                    <template slot-scope="scope">
                        <div :style="{color:scope.row.states=='1'?'red':'green'}" >{{scope.row.states | dataFormat(statesArray)}}</div>
                    </template>                    
                </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="checkNoticeDetails(scope.row.noticeId)" >消息详情</el-button>                       
                </template>
            </el-table-column>                
            </el-table>
        </div>



        <div>
        <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
            <el-pagination
                background
                layout="total,prev,sizes, pager, next,jumper"
                :total="total"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="formSearch.pageSize"
                :current-page.sync="formSearch.pageNum"
                @current-change="getPage"
                @size-change="getPage"
                style="float: right">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import notice from '../../../api/notice';
import bus from '../../../api/eventBus'
import {getUserId} from '../../../utils/auth'
export default {

    name:"noticeList",
    data(){
        return{
            tableData:[],
            total:0,
            formSearch:{
                pageNum:1,
                pageSize:10
            },
            statesArray:[
                {value:1,name:'未读'},
                {value:2,name:'已读'},
                {value:3,name:'发送失败'}                                                                
            ],            
        }
    },
    filters:{
        //类型过滤
        dataFormat(value,list){
            return value || value == '1' ? list.filter( (item) => item.value == value)[0].name:""
        }
    },
    created(){
        this.getPage()
    },
    mounted(){
        
    },
    methods:{
        async getPage(){
            this.formSearch.isNoticeType = '1'
            this.formSearch.userId = getUserId()
            const res = await notice.getNoticeList(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },
        //查看消息详情
        checkNoticeDetails(noticeId){           
            this.$router.push('/notice/noticeDetails')
            setTimeout( () =>{
                bus.$emit("noticeId",noticeId);
            },20)
        }
    }
}
</script>

<style scoped >

</style>
